@import "../../style/modules/function";

.nav-bar-wrapper {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    padding-right: rpx(200);

    .title {
        font-size: rpx(36);
        max-width: rpx(350);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1;
    }

    .icon-list {
        flex: 0 0 rpx(200);
        padding-left: rpx(5);
        display: flex;
        align-items: center;

        .icon {
            width: rpx(70);
            height: rpx(65);
            display: flex;
            align-items: center;
            justify-content: center;

            &.back {
                position: relative;
                padding-left: rpx(5);

                &:after {
                    content: "";
                    width: rpx(20);
                    height: rpx(20);
                    border-left: 2px solid #000;
                    border-bottom: 2px solid #000;
                    transform: rotate(45deg);
                }

                &.hover {
                    border-top-left-radius: rpx(33);
                    border-bottom-left-radius: rpx(33);
                }
            }

            &.home {
                position: relative;
                background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1025 1024' xmlns='http://www.w3.org/2000/svg' width='64.063' height='64'%3E%3Cpath d='M844.844 588.96c-19.28 0-34.977 15.683-34.977 35.022v330.006H233.999v-330.02c0-19.325-15.682-35.022-35.021-35.022s-35.006 15.682-35.006 35.021V988.98c0 19.325 15.667 35.021 35.006 35.021h645.851c19.354 0 35.05-15.682 35.05-35.02V623.966c0-19.324-15.682-35.006-35.035-35.006zM1012.912 451.643L545.265 14.13c-13.458-12.566-34.348-12.595-47.806-.044L28.087 451.627c-14.146 13.181-14.936 35.329-1.74 49.46 6.89 7.402 16.237 11.147 25.614 11.147a34.879 34.879 0 0 0 23.859-9.406L521.29 87.596 965.06 502.769c14.132 13.195 36.265 12.479 49.489-1.653 13.21-14.116 12.478-36.264-1.638-49.473z'/%3E%3C/svg%3E") no-repeat center center;
                background-size: rpx(37);

                &.hover {
                    border-top-right-radius: rpx(33);
                    border-bottom-right-radius: rpx(33);
                }
            }

            &.hover {
                background-color: #b8b8b8;

            }
        }
    }
}
